// import { FormEvent } from "react";
// import { useAuthContextHook } from "../../contexts/auth-context";
// // const apiUrl = process.env.REACT_APP_BASEURL;
// export const RegisterView = () => {
//   //登录请求函数
//   // const login = (param: { name: string; pass: string }) => {
//   //   fetch(`${apiUrl}/login`, {
//   //     method: "POST",
//   //     headers: {
//   //       "Content-Type": "application/json",
//   //     },
//   //     body: JSON.stringify(param),iew
//   //   }).then((res) => {
//   //     console.log(res);
//   //     if (!res.ok) return;
//   //   });
//   // };
//   //使用全局context的hook
//   const { register, user } = useAuthContextHook();
//   //表单提交
//   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
//     event.preventDefault();
//     // 使用断言指定类型
//     const name = (event.currentTarget.elements[0] as HTMLInputElement).value;
//     const pass = (event.currentTarget.elements[1] as HTMLInputElement).value;
//     console.log(name, pass);
//     register({ name, pass });
//   };
//   return (
//     <form onSubmit={handleSubmit}>
//       {user ? <div>登录成功：{user.name}</div> : null}
//       <div>
//         <label htmlFor="username">用户名</label>
//         <input type="text" id="username" />
//       </div>
//       <div>
//         <label htmlFor="password">密码</label>
//         <input type="password" id="password" />
//       </div>
//       <button type="submit">注册</button>
//     </form>
//   );
// };

import { useAuthContextHook } from "../../contexts/auth-context";
import { Button, Form, Input } from "antd";
// const apiUrl = process.env.REACT_APP_BASEURL;
import styled from "@emotion/styled";
import { useAsync } from "../../utils/use-async";
export const RegisterView = ({
  onError,
}: {
  onError: (error: Error | null) => void;
}) => {
  const { register } = useAuthContextHook();
  const { run, isLoading } = useAsync();
  //表单提交检验通过回调
  const onFinish = ({
    cpass,
    ...params
  }: {
    phone: string;
    name: string;
    pass: string;
    cpass: string;
  }) => {
    if (cpass != params.pass) {
      return onError(new Error("请确认输入密码是否一致！"));
    }
    run(register(params)).catch(onError);
  };
  return (
    <Form onFinish={onFinish}>
      <Form.Item
        name="phone"
        rules={[{ required: true, message: "手机号不能为空" }]}
      >
        <Input type="text" id="phone" placeholder="请输入手机号" />
      </Form.Item>
      <Form.Item
        name="name"
        rules={[{ required: true, message: "用户名不能为空" }]}
      >
        <Input type="text" id="name" placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item
        name="pass"
        rules={[{ required: true, message: "密码不能为空" }]}
      >
        <Input type="password" id="pass" placeholder="请输入密码" />
      </Form.Item>
      <Form.Item
        name="cpass"
        rules={[{ required: true, message: "请确认密码" }]}
      >
        <Input type="password" id="cpass" placeholder="请确认密码" />
      </Form.Item>
      <LongButton type="primary" htmlType="submit" loading={isLoading}>
        注册
      </LongButton>
    </Form>
  );
};

/**
 * @description: 按钮宽度添加
 */
const LongButton = styled(Button)`
  width: 100%;
`;
